import React, { Component } from "react";
import { NavBar, Icon, Toast } from "antd-mobile";
import "./Pay.scss";
import axiosToken from "../../utils/myaxios"
export default class Pay extends Component {
  state = {
    carts: [],
    totalPrice: 0,
    sum: 0, // 去支付的商品数量
    addressObj: "",
    /*    address	是	string	详细地址
        address_name	是	string	收件人
        address_mobile	是	string	联系方式
        oauth_token	是	string	登录凭证(放在拦截器中)*/
  };
  componentDidMount() {
    let carts_str = localStorage.getItem("carts");
    let carts = JSON.parse(carts_str || "[]");
    // 判断购物小车是否选中
    carts = carts.filter((v) => {
      return v.checked ? true : false;
    });
    this.setState({
      carts,
    });
    this.handelNum(carts);
    // 地址
    console.log(this.props);
    let token = JSON.parse(localStorage.getItem("loginToken") || "[]");
    axiosToken
      .post("http://s.linweiqin.com/api/s/getUserAddressList", {
        oauth_token: token.oauth_token,
      })
      .then((res) => {
        console.log(
          res.wdata[this.props.location.pathname.replace("/pay/", "")]
        );
        if (res.msg === "获取成功") {
          this.setState({
            addressObj:
              res.wdata[this.props.location.pathname.replace("/pay/", "")] || '',
          });
        }
      });
  }

  // heji和 GoodsNum操作操作
  handelNum = (carts) => {
    let totalPrice = 0; // 总价
    let sum = 0; // 商品数量
    // 计算总价
    carts.forEach((v) => {
      totalPrice += v.price * v.num;
      sum += v.num;
    });
    this.setState({
      carts,
      totalPrice,
      sum,
    });
  };

  //无地址点击
  handleNoGo = (params) => {
    Toast.info("地址还未选择", 1);
  };
  //有地址点击
  handleCanGo = (params) => {
    // 有登录状态
  };
  handlePickAddress = (params) => {
    // let token = JSON.parse(localStorage.getItem("loginToken") || "[]");
    // let oauth_token = token.oauth_token;
    this.props.history.push("/address");
    // http://s.linweiqin.com/api/s/createUserAddress //创建地址

  }

  render() {
    return (
      <div className="yg-pay">
        <NavBar
          className="pay-nav"
          mode="light"
          icon={<Icon type="left" />}
          onLeftClick={() => window.history.go(-1)}
        >
          结算
        </NavBar>
        <div className="pay-pickAddress">
          {
          this.state.addressObj ? (
            <ul>
              <li>
                <div className="address-item-info">
                  <p>收件人：{this.state.addressObj.address_name}</p>
                  <p>手机号：{this.state.addressObj.address_mobile}</p>
                  <p>收获地址：{this.state.addressObj.address}</p>
                  <button
                    className="pay-pickAddress-btn"
                    onClick={this.handlePickAddress}
                  >
                    选择其他地址
                  </button>
                </div>
              </li>
            </ul>
          ) : (
            <button
              className="pay-pickAddress-btn"
              onClick={this.handlePickAddress}
            >
              选择地址
            </button>
          )}
        </div>
        <div className="pay-main">
          <h3>已选商品</h3>
          {this.state.carts &&
            this.state.carts.map((v, i) => {
              return (
                <div className="pay-main-item" key={v.id || v.product_id}>
                  <div className="pay-main-item-content">
                    <img
                      goods-id={v.id || v.product_id}
                      src={v.image_url}
                      alt=""
                    />
                  </div>
                  <div className="pay-main-item-right">
                    <div
                      goods-id={v.id || v.product_id}
                      className="item-right-title"
                    >
                      {v.name}
                    </div>
                    <div className="item-right-price-num">
                      <div className="item-right-price">￥{v.price}</div>
                      <div className="item-right-num">x{v.num}</div>
                    </div>
                  </div>
                </div>
              );
            })}
        </div>
        {/* 支付付款开始 */}
        <div className="pay-bottom">
          <div className="pay-bottom-common">
            合计：<span>￥{this.state.totalPrice}</span>
          </div>
          <div className="pay-bottom-right">
            {this.state.addressObj.address ? (
              <button onClick={this.handleCanGo} className="canGo">
                去支付({this.state.sum})
              </button>
            ) : (
              <button onClick={this.handleNoGo} className="noGo">
                去支付({this.state.sum})
              </button>
            )}
          </div>
        </div>
        {/* 支付付款结算 */}
      </div>
    );
  }
}
